<template>
	<div>
		<el-tabs v-model="activeName" @tab-click="handleTabChange">
			<el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.label" :name="item.value"> </el-tab-pane>
			<div class="content-card">
				<html-label :title="activeLabelTitle">
					<el-button
						v-if="activeName == 'BaseDetail'"
						v-auth="[nowRowData.isOperate == 1, baseConfig.auth.edit]"
						type="primary"
						@click="handleOperate('edit')"
					>
						信息编辑
					</el-button>
				</html-label>
				<component
					v-if="!loading"
					class="pd10"
					:is="whickComm[activeName]"
					:soleKey="`dpVolunteer-${nowRowData.idCard}`"
					@refresh="handleRefresh"
					:nowRowData="nowData"
				></component>
			</div>
		</el-tabs>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod'
import BaseDetail from './BaseDetail/index.vue'
import Train from './Train/index.vue'
import serviceOrder from './serviceOrder/index.vue'
import DataChangeLog from '@/views/datacenter/components/DataChangeLog/index.vue'
import { baseConfig } from '../config'
import { getAreaObj } from '@/utils/util'
import { useOperate } from '@/views/datacenter/hooks/useConfig'
import bus from '@/utils/eventbus'

const { onDelete } = useOperate(6)

const whickComm = {
	BaseDetail,
	Train,
	serviceOrder,
	DataChangeLog,
}
type Props = {
	nowRowData?: any
}
const props = withDefaults(defineProps<Props>(), {})

const emit = defineEmits(['refresh', 'rechange'])
const loading = ref(false)

const tabsList: any = [
	{ label: '基础信息', value: 'BaseDetail' },
	{ label: '培训记录', value: 'Train' },
	{ label: '社区居家服务工单', value: 'serviceOrder' },
	{ label: '信息编辑记录', value: 'DataChangeLog' },
]
const activeName = ref('BaseDetail')
let nowData = ref(props.nowRowData)
provide('nowRowData', nowData)

const activeLabelTitle = ref('基本信息')
const getInitData = () => {
	loading.value = true
	const cr_areas = getAreaObj(props.nowRowData, 'cr')
	const areas_name = getAreaObj(props.nowRowData, '')
	const registerArea: any = getAreaObj(props.nowRowData, 'register_org', 'set')
	loading.value = false
	nowData.value = {
		...props.nowRowData,
		cr_areas,
		areas_name,
		registerAreaNames: registerArea.names,
	}
}

const handleOperate = (type) => {
	if (type == 'delete') {
		onDelete(props.nowRowData[baseConfig.rowKey], baseConfig.api.delete, props.nowRowData.volunteerName).then(() => {
			emit('refresh')
		})
		return
	}
	emit('rechange', 'Rechange', props.nowRowData, '信息编辑数据')
}

bus.on('menu-operate', (res) => {
	if (res.pageName == baseConfig.pageName) {
		handleOperate(res.operate)
	}
})

const handleTabChange = (tab) => {
	activeLabelTitle.value = tab.props.label
}

const handleRefresh = () => {
	emit('refresh')
}
onMounted(() => {
	getInitData()
})
</script>

<style scoped></style>
